<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/tongyong.css">
    <link rel="stylesheet" href="../css/guwuche.css">
</head>
<body>
    <h1>欢迎来到购物车，请付钱</h1>

    <div class="container"></div>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/cookie.js"></script>
<script>
//调用函数，动态生成页面
ste()
//创建一个函数，动态生成页面
function ste(){
    //定义变量存储种类，件数，金额
            let type = 0;
            let number = 0;
            let money = 0;
//获取本地存储数据信息
let cart=localStorage.cart;
if(cart===undefined){
    //没有创建购物车，生成对应的提示信息
    $('.container').html('<h1>你还没有创建购物车</h1>');
    }else{
        //定义变量存储结果
        let bool=true;
        //有购物车数据
        cart = JSON.parse(cart);
        if(cart.length===0){
            //购物车数组是一个空数组，生成提示信息
            $('.container').html('<h1>你的购物车已经被清空，请你添加商品</h1>')
        }else{
            //有数据信息，动态生成页面,动态生成的部分分为3个部分
            //起始部分：起始标签至ul标签的起始标签
            //中间部分：根据数组循环遍历生成的li标签
            //结束部分：ul标签的结束标签到最后
            //
            //起始部分
            let str=`
            <div class="panel panel-info ">
              <div class="panel-body bg-info">
                <div class="checkbox">
                  <label>
                    <input name="all" type="checkbox" value="">
                    全选
                  </label>
                </div>
              </div>
              <div class="panel-footer">
                <ul class="cart-list">
            `;
            //
            //中间部分
            cart.forEach((item, key) => {
                        // 如果 有 商品 选中状态是 false 给 变量bool 也赋值false
                        if (item.buy === false) {
                            bool = false
                        } else {
                            // 如果 当前商品 是 选中状态
                            // 计算 购买商品种类 简述 金额

                            // 种类 累加1
                            type++;
                            // 件数 累加 商品信息中的num
                            number += item.num;
                            // 金额 累加 单价 * 件数
                            money += item.goods_price * item.num;
                        }
            str+=`
            <li class="cart-item">
                <div class="left">
                  <input name="other" index="${key}" type="checkbox" ${item.buy ? 'checked' : ''}>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="减" index="${key}" type="button" class="btn btn-default" ${ item.num === 1 ? 'disabled' : '' }>-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="加" index="${key}" type="button" class="btn btn-default" ${ item.num == item.goods_number ? 'disabled' : '' }>+</button>
                      </div>
                      <button name="del" index="${key}" class="del btn btn-danger">我不要了</button>

                    </div>
                  </div>
                </div>
              </li>
            `;
            })
            //
            //结束部分
            str += `
                </ul>
              </div>
              <div>
                <h1>您一共购买了 ${type} 种商品</h1>
                <h1>您一共购买了 ${number} 件商品</h1>
                <h1>您需要支付 ${money.toFixed(2)} 元</h1>
              </div>
            </div>
          `;
            //将字符串写入标签中
            $('.container').html(str);
             // 根据 bool 变量储存的数据 设定 全选按钮 选中状态
             $('[name="all"]').prop('checked', bool);
        }
    }
}
// 给父级标签添加点击事件 通过事件委托完成函数程序的执行
$('.container').click(function(e) {
            // 获取 cart数据
            const cart = JSON.parse(localStorage.cart);

            // 如果点击的是 全选按钮
            if (e.target.getAttribute('name') === 'all') {
                // 设定 localStorage 中 所有数据单元 buy属性值
                cart.forEach(item => {
                    item.buy = e.target.checked;
                })

                // 如果点击的是 其他input标签  
            } else if (e.target.getAttribute('name') === 'other') {
                // 修改索引下标 和 点击标签索引下标相同的 数组中的数据
                cart[e.target.getAttribute('index') - 0].buy = e.target.checked;

                // 如果点击的是 删除标签
            } else if (e.target.getAttribute('name') === 'del') {
                // 从点击标签 索引下标 开始 数组中删除 1个单元
                cart.splice(e.target.getAttribute('index') - 0, 1);

                // 如果点击的是 - 标签
            } else if (e.target.getAttribute('name') === '减') {
                // 给索引下标相同的数据 num属性值 累减1
                cart[e.target.getAttribute('index') - 0].num--;

                // 如果点击的是 + 标签
            } else if (e.target.getAttribute('name') === '加') {
                // 给索引下标相同的数据 num属性值 累减1
                cart[e.target.getAttribute('index') - 0].num++;

            }


            // 新数组 设定 给 localStorage.cart 存储
            // cart数组要转化为 json字符串
            localStorage.cart = JSON.stringify(cart);
            // 调用函数 动态渲染生成页面
            ste()
        })
</script>
</body>
</html>